@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
  height: 100%;
}

html {
  height: 100%;
  box-sizing: border-box;
}
#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

div:focus{
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

ul li { padding: 0; margin: 0; list-style: none;}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main{
  min-height: 100%
}

.app-container {
  padding: 20px;
}

//操作栏样式
.operate-container {
  margin-top: 20px;
}

.operate-container .btn-add {
  float: right;
}

//表格栏样式
.table-container {
  margin-top: 20px;
}

//批量操作栏样式
.batch-operate-container {
  display: inline-block;
  margin-top: 20px;
}

//分页栏样式
.pagination-container {
  display: inline-block;
  float: right;
  margin-top: 20px;
}

//添加、更新表单样式
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
}

//主标题
.font-extra-large {
  font-size: 20px;
  color: #303133;
}

//标题
.font-title-large {
  font-size: 18px;
  color: #303133;
}

//小标题
.font-title-medium {
  font-size: 16px;
  color: #303133;
}

//正文
.font-medium {
  font-size: 16px;
  color: #606266;
}

//正文
.font-small {
  font-size: 14px;
  color: #606266;
}

//正文（小）
.font-extra-small {
  font-size: 13px;
  color: #606266;
}

.color-main {
  color: #409EFF;
}

.color-success {
  color: #67C23A;
}

.color-warning {
  color: #E6A23C;
}

.color-danger {
  color: #F56C6C;
}

.color-info {
  color: #909399;
}

/*reset*/
h1, h2, h3 ,h4 ,h5 ,h6 {
  padding: 0; margin: 0;
}
.text-center{
  text-align: center;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}

.dis-block{
  display: block !important;
}

.fontsize14{ font-size: 14px;}
.fr{ float: right;}
.fl{ float: left;}
/*color*/
.orange-shallow{ color: #ff9900}
.orange-deep{ color: #ff9900}
.bg-gay{ background: #f8f8f8 !important; }
.bg-blue{ background: #f8fcff}

.is-cancle{background: #f8f8f8 !important; color: #adadad}

/*margin  padding*/
.margin-t10{margin-top: 10px;}
.margin-t20{margin-top: 20px;}
.margin-t30{margin-top: 30px;}
.margin-t40{margin-top: 40px;}
.margin-l2{margin-left: 2px;}
.margin-l5{margin-left: 5px;}
.margin-l10{margin-left: 10px;}
.margin-l20{margin-left: 20px;}
.margin-t1{margin-top: 1px;}
.margin-t2{margin-top: 2px;}
.margin-t5{margin-top: 5px;}
.margin-b5{margin-bottom: 5px;}

.margin-tb5{margin: 5px 0;}
.margin-w-auto{margin: 0 auto;}

.lnline-block{
  display: inline-block;
}
.noPadding {
  padding: 0;
}
.padding5{ padding: 5px;}
.padding10{ padding: 10px;}
.padding20{ padding: 20px;}
.paddingL5{ padding-left: 5px;}
.paddingL10{ padding-left: 10px;}
.paddingLR10 { padding: 0 10px;}
.paddingLR20 { padding: 0 20px;}
.paddingR5{ padding-right: 5px;}
.paddingR10{ padding-right: 10px;}
.paddingTb5{ padding: 5px 0;}
.paddingTb10{ padding: 10px 0;}
.paddingTb20{ padding: 20px 0;}
.paddingT20{ padding-top: 20px;}
.paddingT50{ padding-top: 50px;}
.paddingB10{ padding-bottom: 10px;}
.paddingB20{ padding-bottom: 20px;}


.wfull{ width: 100%}
.wPer50{ width: 50%}
.wPer49{ width: 49%}
.w100{width: 100px;}
.w150{width: 150px;}
.w160{width: 160px;}
.w180{width: 180px;}
.w200{width: 200px;}
.w300{width: 300px;}
.w400{width: 400px;}
.w500{width: 500px;}
.w600{width: 600px;}

.color-gay{ color: #606266}
.color-gay-shallow{ color: #a5a5a5}
.color-red{ color: #F56C6C;}
.color-blue{ color: #3198ff;}
.color-green{ color: #67C23A;}
.color-orange{ color: #E6A23C;}

.font12{font-size: 12px;}
.font30{font-size: 30px;}
.line-height20{ line-height: 20px;}

/*border*/
.borderNone{border:none !important;}
.border-none{border:none !important;}
.border-gay{
  border: 1px #e6e6e6 solid;
}
.border-l-gay{
  border-right: 1px #e6e6e6 solid;
}
.oper-button{
  padding: 5px 10px;
  border-radius: 0 0 5px 5px;
  background-color:rgba(37, 37, 37, 0.16);
}
.btn-group{
  .el-button+.el-button{
    margin-left: 3px; 
  }
}
// .layer-iframe{
//   width: 800px; z-index: 100;
//   height: 300px; background: #409EFF; position: absolute; left: 0; top: 30px;
// }
.dash-card{
  height: 80px;
  .item{
    height: 30px; line-height: 30px;
    .num{
      padding: 3px 8px;
      border-radius: 2px; font-size:14px;
      background: #409EFF; color: #ffffff;
    }
    .tit{
      font-size: 14px; display: inline-block; color: #cccccc
    }
    .w50{
      width: 50px;
    }
    .amount {
      font-size: 18px;
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.border-radius-none {
  border-radius: 0;
}
.oper-btn-card{
  border-radius: 0;
  .el-card__body{
    padding: 10px;
  }
}
.lit-divider{
  margin: 10px 0;
}
.table-oper-btns{
  .icon-zhuan{
    font-weight: bold;
    font-size: 12px;
  }
  .icon-huan{
    font-weight: bold;
    font-size: 12px;
  }
  text-align: center;
  .el-button--text.is-circle{
    padding: 0px;
    i{font-size: 20px;}
  }
  .el-button.is-circle{
    padding: 3px;
  }
}
.form-no-bottom{
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0;
  }
}
.form-lit5-bottom{
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 5px;
  }
}

.tab{
  font-size: 14px; text-align: center;
  ul{
    padding: 0;
    margin: 0;
    li.current{
      background: #ffffff; 
      border-top: solid 2px #409efb
    }
    li{
      float: left;
      cursor: pointer;
      height: 46px;
      list-style: none;
      background: #f8f8f9; 
      border: #e8eaec solid 1px; border-bottom:none;
      margin-right: 5px;
    }
    li a{
      padding: 10px 25px;
      display: block;
    }
  }
}

.divider5{
  .el-divider--horizontal{
    margin: 5px 0;
  }
}

.divider10{
  .el-divider--horizontal{
    margin: 10px 0;
  }
}